<template>
<div :style="styleObj">
    <v-chart :options="options" autoresize />
  </div>
</template>
<script>


//import "../../../../../../node_modules/echarts/map/js/province/jiangsu.js";

export default {
  name: "widgetJiangSuMap",
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      optionsCollapse: {}, // 图标属性
      optionsSetup: {},
      options:{
        title: {
          text: "江苏省分布图",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
              //console.log("formatter params",params)                                          
              // let value = (params.value + '').split('.');
              // value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
              if(!params){
                return '';
              }

              if(!params.data){
                return '';
              }

              return '<div style="text-align:left;font-size:22px;padding:10px;">' + params.name + '<br/>' +
              "园区数量：" + params.data.industrialGardenCount + '<br/>' +
              "合作企业/基地：" + params.data.cooperativeEnterpriseCount + '<br/>' +
              "就业人数：" + params.data.historicalEmploymentCount + '人<br/>' +
              "顶岗实习人数：" + params.data.internsCount + '人</div>';
            }
          },
          visualMap: {
            left: 'left',
            min: 500000,
            max: 3800000,
            inRange: {
              color: ['#4575b4']
            },
            text:['High','Low'],
            calculable: true,
            show: false
          },
          series: [
            {
              name: '可调资源分布',
              type: 'map',
              roam: true,
              map: 'jiangsu',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: 'rgba(0, 255, 0, 1)'
                  }
                }
              },
              itemStyle:{
                emphasis:{label:{show:true}}
              },
              // 文本位置修正
              textFixed: {
                Alaska: [20, -20]
              },
              data:[]
            }
          ]
        }
    };
  },
   computed: {
    styleObj() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.optionsStyle.width + "px",
        height: this.optionsStyle.height + "px",
        left: this.optionsStyle.left + "px",
        top: this.optionsStyle.top + "px",
        background: this.optionsSetup.background
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsCollapse = val.collapse;
        this.optionsSetup = val.setup;
        this.editorOptions();
      },
      deep: true
    }
  },
  created() {
    console.log('value',this.value)
    this.optionsStyle = this.value.position;
    this.optionsData = this.value.data;
    this.optionsCollapse = this.value.collapse;
    this.optionsSetup = this.value.setup;
    this.editorOptions();
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.editorOptions();
    },
    editorOptions() {
      this.setOptionsData();
    },
     // 处理数据
    setOptionsData() {
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      optionsData.dataType == "staticData"
        ? this.staticDataFn(optionsData.staticData)
        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
    },
    staticDataFn(val) {
      console.log('staticDataFn',val);
      const series = this.options.series;
      series[0].data = val;
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then(res => {
        this.renderingFn(res);
      });
    },
    renderingFn(val) {
        console.log('renderingFn',val);
      const series = this.options.series;
      series[0].data = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.echartMap {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
